
<template>
	<view class="page">
		<view class="search">
			<u-search :show-action="true" shape="round" bg-color="#fff" :animation="true" v-model="searchValue" @custom="search(searchValue)" @search="search(searchValue)"></u-search>
		</view>
		<view class="" v-if="!searchValue||issearch">
			<view class="hotSearch">
				<text>热搜</text>
				<text class="red" @click="search('多肉')">多肉</text>
				<text class="red"@click="search('橘猫')">橘猫</text>
				
			</view>
			<view class="bar"></view>
			<view class="HisSearch">
				<view class="history">
					<text>搜索历史</text>
					<view class="">
						<u-icon name="trash-fill" color="#666" size="30"></u-icon>
						<text>清空</text>
					</view>
				</view>
				<view class="text">
					<text v-for="(item,index) in historyList" :key='index' @click="search(item)">{{item}}</text>
				</view>
			</view>
		</view>
		<view class="" v-else style="padding: 20rpx;">
			<view class="" v-if="dataList.length>0">
				<goodsList :list='dataList'></goodsList>
			</view>
			<view class="" v-else>
				<u-empty text="数据为空" mode="list"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import goodsList from "../../component/goodsList.vue"
	export default {
		components:{
			goodsList	
		},
		data() {
			return {
				issearch:true,
				searchValue:'',
				dataList:[],
				historyList:[]
			}
			
		},
		computed: {
			
			
		},
		onShow() {
			
		},
		onLoad() {
			this.historyList=uni.getStorageSync('hisList')||[]
		},
		methods: {
			search(e){
				this.searchValue=e
				this.issearch=false
				console.log(e)
				this.$http.post('goods_msg/like?goodsMsg='+this.searchValue).then(res=>{
					this.dataList=res.list
				})
				if(!this.historyList.includes(e)){
					this.historyList.push(e)
					uni.setStorage({
						key:'hisList',
						data:this.historyList
					})
				}
				
			}
		}
	}
</script>



<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100%;
		background-color: #fff;
		.search{
			width: 100%;
			height: 120rpx;
			padding: 30rpx;
			background-color: #e6e7e8;
		}
		.hotSearch{
			padding: 20rpx;
			width: 100%;
			height: 200rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			line-height: 56rpx;
			.red{
				color: #ff0000;
			}
		}
		.bar{
			background-color: #f6f7fc;
			width: 100%;
			height: 16rpx;
		}
		.HisSearch{
			width: 100%;
			background-color: #fff;
			.history{
				color: #999;
				font-size: 26rpx;
				width: 100%;
				padding: 30rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2rpx solid #eee;
			}
			.text{
				padding: 30rpx;
				display: flex;
				flex-direction: column;
				line-height: 58rpx;
			}
		}
	}
</style>
